You have all of your multilingual pages set up, but now you need to give your users a way to access those pages. There are multiple ways this can be done. The most common solution is adding a language selection tool in the form of multiple links or by using a drop-down list.
\nIn my case - I had to implement three different languages, so I went with the buttons approach.
\nFirst things first - we need to create a new component called LanguageSwitch (or whatever you find to be more appropriate for your use-case).
\nimport React from \"react\"\n\nconst LanguageSwitch = ({ language, location }) => {\n return <div></div>\n}\n\nexport default LanguageSwitchThe component takes in two parameters. Language is the language code string that you can pass in on each page. Location is the standard location prop that every page component in Gatsby has access to. Here is how you can grab it and pass it down on a default home page.
\nimport React from \"react\"\nimport LanguageSwitch from \"../components/languageSwitch\"\n\nclass Index extends React.Component {\n render() {\n return <LanguageSwitch language=\"en\" location={this.props.location} />\n }\n}\n\nexport default IndexFor showing the language Urls I wanted to make a system that displays only the languages that should be available for clicking, since having three buttons visible all the time would be a bit cluttered. So, if the user was currently on an English page he would see the buttons for other two languages, but not the English one.
\nFor that to work I would need a way to reference available languages by their language code and display appropriate label on the button, so this is what I did.
\nimport React from \"react\"\n\nconst LanguageSwitch = ({ language, location }) => {\n let languageList = { sr: \"srpski\", en: \"English\", el: \"Ελληνικα\" }\n let links = []\n return <div>{links}</div>}\n\nexport default LanguageSwitchI added an object which keys were the language codes, and the values were the button or link labels. I also added an array for storing the links and returning them to the page once we figure out which ones need to be shown. Next thing was figuring out the page Url for each button.
\nimport React from \"react\"\n\nconst LanguageSwitch = ({ language, location }) => {\n let languageList = { sr: \"srpski\", en: \"English\", el: \"Ελληνικα\" }\n\n let links = []\n\n let pageName = location.pathname\n\n if (pageName.includes(\"/el\") || pageName.includes(\"/sr\")) { pageName = pageName.split(\"/\")[2] }\n return <div>{links}</div>\n}\n\nexport default LanguageSwitchLet’s say we open up the contact page with Greek content. The location.pathname will be /el/contact/. Splitting that string gives us an array with four items.
\nexampleArray = [\"\", \"el\", \"contact\", \"\"]The page name is the value with index of 2, so that’s what we grab. If we were currently on the English contact page (which in my case doesn’t have the language code prefix) then location.pathname would equal to /contact/ and that’s exactly what we want. There is no need to extract the page from that string, so that’s why we add a condition before the split.
\nThe only thing left to do is generating the appropriate Urls.
\nimport React from \"react\"\nimport { Link } from \"gatsby\"\n\nconst LanguageSwitch = ({ language, location }) => {\n let languageList = { sr: \"srpski\", en: \"English\", el: \"Ελληνικα\" }\n\n let links = []\n\n let pageName = location.pathname\n\n if (pageName.includes(\"/el\") || pageName.includes(\"/sr\")) {\n pageName = pageName.split(\"/\")[2]\n }\n\n for (var key in languageList) { if (key !== language) { let languagePath = \"\"\n if (key !== \"en\") { languagePath = `/${key}/` }\n let link = ( <Link key={key} to={`${languagePath}${pageName}`}> {languageList[key]} </Link> )\n links.push(link) } }\n return <div>{links}</div>\n}\n\nexport default LanguageSwitchWe go through the languageList object to check if the Url needs to be generated. For English pages we don’t need to add a prefix, but for other languages we set languagePath to the appropriate language key code.
\nThen we create a new Link, which is a built-in Gatsby component used for linking internal pages. Link’s “to” property is what we would add as “src” in a regular <a> tag. In this case we combine the language key code and the page name which we found earlier. Between the Link tags we add our link’s text, which is in this case the language label that we get from the languageList object.
\nIn the end we push the link to our return array and that’s it. Of course, the links are going to have your default Url styling since we didn’t add any specific css to them, but you can always set them up however you want by adding some css.
\nWhat if you don’t want a language switch with a huge number of buttons because you are implementing only 2 different languages? Then there’s probably no need to go to the trouble of hiding any buttons, and you can just show both choices at the same time. I ended up doing this in the end since client’s requirements changed and they wanted only English and Greek options.
\nHere is what that code would look like.
\nimport React from \"react\"\nimport { Link } from \"gatsby\"\n\nconst LanguageSwitch = ({ location }) => {\n let pageName = location.pathname\n\n if (pageName.includes(\"/el\")) {\n pageName = pageName.split(\"/\")[2]\n }\n\n let greekPagePath = `/el/${pageName}`\n\n return (\n <div>\n <Link to={pageName}>English</Link>\n <Link to={greekPagePath}>Ελληνικα</Link>\n </div>\n )\n}\n\nexport default LanguageSwitchMuch simpler. First of all, we don’t need to pass in the language as a parameter any more, because we don’t need to hide any options. We also don’t need an object with all language key codes and labels. We pick up the location.pathname for the English pageName and we split it for the Greek version as before. Then we simply return both Links since we don’t have to go through a loop.
\nIf you want to use flag images as buttons instead of language labels, you can do that too. Just import your images, replace them with labels and you should end up with something like this:
\nimport React from \"react\"\nimport { Link } from \"gatsby\"\nimport greekFlag from \"../assets/greece.svg\"import ukFlag from \"../assets/uk.svg\"\nconst LanguageSelector = ({ location }) => {\n let pageName = location.pathname\n\n if (pageName.includes(\"/el\")) {\n pageName = pageName.split(\"/\")[2]\n }\n\n let greekPagePath = `/el/${pageName}`\n\n return (\n <div>\n <Link to={pageName}>\n <img src={ukFlag} alt=\"english language\" /> </Link>\n <Link to={greekPagePath}>\n <img src={greekFlag} alt=\"greek language\" /> </Link>\n </div>\n )\n}\n\nexport default LanguageSelectorYou will probably need to adjust the way your images are rendered with some additional css, but that’s a completely different topic.
\nSo far so good. We have set up our page structure one way or another and we have a component that can handle switching our website’s language. Our page and component translations are still not set up and this is something we will cover in the last part of this series. We will go over a couple of examples explaining what are some easy ways to set up our language data to be accessible throughout all of our pages. We will also cover how to translate regular components, such as a main navigation menu.
\nI also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.